<template>
  <div class="app-container">
    <div style="width: 100%;" :style="{height: thisHeight}">
      <div class="el-card el-card-box">
        <el-button-group>
          <el-button size="mini" type="default" id="addVertexDialog">
            节点 <i class="el-icon-monitor"></i>
          </el-button>
          <el-button size="mini" type="default" id="addTextDialog">
            文本 <i class="el-icon-document"></i>
          </el-button>
          <!--  <el-button size="mini" type="default" id="addBorderDialog">
            边框 <i class="el-icon-crop"></i>
          </el-button>
          <el-button size="mini" type="default" id="addLegendDialog">
            图例 <i class="el-icon-c-scale-to-original"></i>
          </el-button>-->
        </el-button-group>

        <el-upload ref="uploadXml" class="upload-demo" style="display: inline-block; margin-left: 20px;"
                   action="#"
                   :show-file-list="false"
                   :http-request="handleUploadXml">
          <el-button size="mini" type="default">导入XML <i class="el-icon-upload"></i></el-button>
        </el-upload>

        <el-button-group style="margin-left: 20px">
          <el-button size="mini" type="default" id="zoomIn">
            放大 <i class="el-icon-zoom-in"></i>
          </el-button>
          <el-button size="mini" type="default" id="actualSize">
            还原 <i class="el-icon-c-scale-to-original"></i>
          </el-button>
          <el-button size="mini" type="default" id="zoomOut">
            缩小 <i class="el-icon-zoom-out"></i>
          </el-button>
          <el-button size="mini" type="default" id="delete">
            删除 <i class="el-icon-delete"></i>
          </el-button>
          <el-button size="mini" type="default" @click="save"
                     v-hasPermi="['monitor:topology:add', 'monitor:topology:edit']">
            保存 <i class="el-icon-success"></i>
          </el-button>
        </el-button-group>
      </div>
      <div class="el-card el-card-box" style="height: 100%; padding: 0" id="graphContainer"></div>
    </div>

    <!---------------------- 新增节点的dialog begin ------------------->
    <el-dialog title="新增节点" :visible.sync="nodeDialogFormVisible">
      <el-form :model="nodeForm" :rules="nodeRules" ref="nodeForm">
        <el-form-item label="节点名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="nodeForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字体位置" :label-width="formLabelWidth" prop="fontLocation">
          <el-radio-group v-model="nodeForm.fontLocation" size="mini">
            <el-radio-button
              label="verticalLabelPosition=middle;labelPosition=center;align=center;verticalAlign=middle;">居中
            </el-radio-button>
            <el-radio-button label="verticalLabelPosition=top;labelPosition=center;align=center;verticalAlign=bottom;">
              上
            </el-radio-button>
            <el-radio-button label="verticalLabelPosition=bottom;labelPosition=center;align=center;verticalAlign=top;">
              下
            </el-radio-button>
            <el-radio-button label="verticalLabelPosition=middle;labelPosition=left;align=right;verticalAlign=middle;">
              左
            </el-radio-button>
            <el-radio-button label="verticalLabelPosition=middle;labelPosition=right;align=left;verticalAlign=middle;">
              右
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="字体大小" :label-width="formLabelWidth" prop="fontSize">
          <el-input-number v-model="nodeForm.fontSize" :min="12" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="字体样式" :label-width="formLabelWidth" prop="fontStyle">
          <el-checkbox-group v-model="nodeForm.fontStyle" size="mini">
            <el-checkbox-button label="1">
              <park-text-bold/>
            </el-checkbox-button>
            <el-checkbox-button label="2">
              <park-text-italic/>
            </el-checkbox-button>
            <el-checkbox-button label="4">
              <park-text-underline/>
            </el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="字体颜色" :label-width="formLabelWidth" prop="fontColor">
          <div class="block">
            <el-color-picker v-model="nodeForm.fontColor"></el-color-picker>
          </div>
        </el-form-item>
        <el-form-item label="图片选择" :label-width="formLabelWidth" prop="image">
          <nodeImageUpload @addNodeImage="addNodeImage" @deleteNodeImage="deleteNodeImage"
                           ref="nodeImageUpload" v-model="nodeForm.image"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="nodeDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveVertex">确 定</el-button>
      </div>
    </el-dialog>
    <!---------------------- 新增节点的dialog end ------------------->

    <!---------------------- 新增线条的dialog begin ------------------->
    <el-dialog title="新增线条" :visible.sync="edgeDialogFormVisible">
      <el-form :model="edgeForm" ref="edgeForm">
        <el-form-item label="线条名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="edgeForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字体大小" :label-width="formLabelWidth" prop="fontSize">
          <el-input-number v-model="edgeForm.fontSize" :min="12" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="字体样式" :label-width="formLabelWidth" prop="fontStyle">
          <el-checkbox-group v-model="edgeForm.fontStyle" size="mini">
            <el-checkbox-button label="1">
              <park-text-bold/>
            </el-checkbox-button>
            <el-checkbox-button label="2">
              <park-text-italic/>
            </el-checkbox-button>
            <el-checkbox-button label="4">
              <park-text-underline/>
            </el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="字体颜色" :label-width="formLabelWidth" prop="fontColor">
          <div class="block">
            <el-color-picker v-model="edgeForm.fontColor"></el-color-picker>
          </div>
        </el-form-item>
        <el-form-item label="线条颜色" :label-width="formLabelWidth" prop="edgeColor">
          <div class="block">
            <el-color-picker v-model="edgeForm.edgeColor"></el-color-picker>
          </div>
        </el-form-item>
        <el-form-item label="线条大小" :label-width="formLabelWidth" prop="edgeSize">
          <el-input-number v-model="edgeForm.edgeSize" :min="1" :max="6"></el-input-number>
        </el-form-item>
        <el-form-item label="线条样式1" :label-width="formLabelWidth" prop="edgeStyle1">
          <el-radio-group v-model="edgeForm.edgeStyle1" size="mini">
            <el-radio-button label="rounded=0;">直角</el-radio-button>
            <el-radio-button label="rounded=1;">圆角</el-radio-button>
            <el-radio-button label="curved=1;">曲线</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="线条样式2" :label-width="formLabelWidth" prop="edgeStyle2">
          <el-radio-group v-model="edgeForm.edgeStyle2" size="mini">
            <el-radio-button label="">实线</el-radio-button>
            <el-radio-button label="dashed=1;">虚线</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="edgeDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdge">确 定</el-button>
      </div>
    </el-dialog>
    <!---------------------- 新增线条的dialog end ------------------->

    <!---------------------- 新增文本的dialog begin ------------------->
    <el-dialog title="新增文本" :visible.sync="textDialogFormVisible">
      <el-form :model="textForm" :rules="textRules" ref="textForm">
        <el-form-item label="文本名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="textForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字体大小" :label-width="formLabelWidth" prop="fontSize">
          <el-input-number v-model="textForm.fontSize" :min="12" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="字体样式" :label-width="formLabelWidth" prop="fontStyle">
          <el-checkbox-group v-model="textForm.fontStyle" size="mini">
            <el-checkbox-button label="1">
              <park-text-bold/>
            </el-checkbox-button>
            <el-checkbox-button label="2">
              <park-text-italic/>
            </el-checkbox-button>
            <el-checkbox-button label="4">
              <park-text-underline/>
            </el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="字体颜色" :label-width="formLabelWidth" prop="fontColor">
          <div class="block">
            <el-color-picker v-model="textForm.fontColor"></el-color-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="textDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveTextVertex">确 定</el-button>
      </div>
    </el-dialog>
    <!---------------------- 新增文本的dialog end ------------------->
  </div>
</template>

<script>
import {Utils} from '@/topology/utils';
import {Config} from '@/topology/config';
import {addTopology, updateTopology, uploadXml} from "@/api/boomMonitor/topology";
import nodeImageUpload from './upload'

export default {
  name: "edit",
  data() {
    return {
      nodeDialogFormVisible: false,
      edgeDialogFormVisible: false,
      textDialogFormVisible: false,
      nodeForm: {
        name: '',
        fontLocation: "verticalLabelPosition=bottom;labelPosition=center;align=center;verticalAlign=top;",
        fontColor: '#333333',
        fontStyle: [],
        fontSize: 14,
        image: '',
        json: null
      },
      edgeForm: {
        name: '',
        fontColor: '#333333',
        edgeColor: '#1890ff',
        fontStyle: [],
        fontSize: 14,
        edgeSize: 2,
        edgeStyle1: 'rounded=1;',
        edgeStyle2: '',
        json: null
      },
      textForm: {
        name: '',
        fontColor: '#333333',
        fontStyle: [],
        fontSize: 14,
        json: null
      },
      formLabelWidth: "80px",
      nodeRules: {
        name: [
          {required: true, message: "节点名称不能为空", trigger: "blur"}
        ],
      },
      textRules: {
        name: [
          {required: true, message: "文本名称不能为空", trigger: "blur"}
        ],
      }
    }
  },
  components: {
    'nodeImageUpload': nodeImageUpload
  },
  computed: {
    // 拓扑高度
    thisHeight: function () {
      return (window.innerHeight - 110) + 'px';
    }
  },
  mounted() {
    let _this = this;
    this.$nextTick(function () {
      _this.config = new Config(true, "graphContainer");
      _this.utils = new Utils();
      _this.config.configureStylesheet();
      // 拖动节点元素新增
      _this.utils.draggable("addVertexDialog", _this.config.graph, function (graph, x, y) {
        _this.nodeDialogFormVisible = true;
        _this.nodeForm.json = {graph: graph, x: x, y: y};
      });
      // 拖动文本元素新增
      _this.utils.draggable("addTextDialog", _this.config.graph, function (graph, x, y) {
        _this.textDialogFormVisible = true;
        _this.textForm.json = {graph: graph, x: x, y: y};
      });
      // 监听节点之间的连线
      _this.config.connectionEvent(function (source, target) {
        _this.edgeDialogFormVisible = true;
        _this.edgeForm.json = {source: source, target: target};
      });
      _this.utils.toolbarAction("actualSize", _this.config.editor);
      _this.utils.toolbarAction("zoomIn", _this.config.editor);
      _this.utils.toolbarAction("zoomOut", _this.config.editor);
      _this.utils.toolbarAction("delete", _this.config.editor);
      _this.initTopology();
    });
  },
  methods: {
    // 保存编辑的拓扑
    save: function () {
      let xml = this.utils.getXml(this.config.graph);
      let values = this.$route.query;
      values.xml = xml;
      values.params = null;
      if (values.id == null) {
        addTopology(values).then(response => {
          this.$route.query.id = response.msg;
          this.msgSuccess("保存成功");
        });
      } else {
        updateTopology(values).then(response => {
          this.msgSuccess("保存成功");
        });
      }
    },
    // 初始化拓扑
    initTopology() {
      let query = this.$route.query;
      if (query.xml) {
        this.utils.loadXml(query.xml, this.config.graph);
      }
    },
    // 新增节点
    saveVertex: function () {
      this.$refs["nodeForm"].validate(valid => {
        if (valid) {
          let value = this.nodeForm;
          let style = "fontColor=" + value.fontColor
            + ";fontSize=" + value.fontSize + ";" + value.fontLocation;
          if (value.fontStyle.length > 0) {
            let s = 0;
            for (let i in value.fontStyle) {
              s += parseInt(value.fontStyle[i]);
            }
            style += "fontStyle=" + s + ";";
          }
          if (!this.isEmpty(value.image)) {
            style += 'shape=image;imageAspect=0;image=' + value.image + ";";
          }
          this.utils.insertNode(value.json.graph, value.name, value.json.x, value.json.y
            , style, 50, 50);
          this.resetForm("nodeForm");
          this.$refs.nodeImageUpload.clearFiles();
          this.nodeDialogFormVisible = false;
        }
      });
    },
    // 新增线条
    saveEdge: function () {
      this.$refs["edgeForm"].validate(valid => {
        if (valid) {
          let value = this.edgeForm;
          let style = "fontColor=" + value.fontColor + ";fontSize=" + value.fontSize
            + ";strokeColor=" + value.edgeColor + ";strokeWidth=" + value.edgeSize + ";"
            + value.edgeStyle1 + value.edgeStyle2;
          if (value.fontStyle.length > 0) {
            let s = 0;
            for (let i in value.fontStyle) {
              s += parseInt(value.fontStyle[i]);
            }
            style += "fontStyle=" + s + ";";
          }
          this.utils.insertEdge(this.config.graph, value.name, value.json.source, value.json.target, style);
          this.resetForm("edgeForm");
          this.edgeDialogFormVisible = false;
        }
      });
    },
    addNodeImage: function (value) {
      this.nodeForm.image = value;
    },
    deleteNodeImage: function (value) {
      this.nodeForm.image = '';
    },
    // 保存文本说明
    saveTextVertex: function () {
      this.$refs["textForm"].validate(valid => {
        if (valid) {
          let value = this.textForm;
          let style = "text;html=1;strokeColor=none;fillColor=none;whiteSpace=wrap;rounded=0;labelBackgroundColor=none;";
          style += "fontColor=" + value.fontColor + ";fontSize=" + value.fontSize + ";";
          if (value.fontStyle.length > 0) {
            let s = 0;
            for (let i in value.fontStyle) {
              s += parseInt(value.fontStyle[i]);
            }
            style += "fontStyle=" + s + ";";
          }
          let cell = this.utils.insertNode(value.json.graph, value.name, value.json.x, value.json.y
            , style, value.name.length * 20, 30);
          this.resetForm("textForm");
          this.textDialogFormVisible = false;
        }
      });
    },
    handleUploadXml: function (data) {
      let _this = this;
      const file = data.file;
      // 根据后台需求数据格式
      const form = new FormData();
      // 文件对象
      form.append("file", file);
      uploadXml(form).then(xml => {
        if (!_this.isEmpty(xml)) {
          _this.utils.loadXml(xml, _this.config.graph);
          _this.$message.success("导入并解析成功！");
        } else {
          _this.$message.warning("解析异常，请检查文件是否正确");
        }
      });
    }
  }
}
</script>

<style scoped>
.el-icon-success:before {
  color: green;
}

.el-icon-delete:before {
  color: red;
}
</style>
